import {designPage} from "@peryl/react-compose";
import {i18n, Icon, Tooltip} from "plain-design";
import './summary-card-sales.scss';
import {RollingNumber} from "../../../common/RollingNumber";

export default designPage(() => {
  return () => (
    <div className="pro-data-statistic-summary-card">
      <div className="pro-data-statistic-summary-card-title">
        <span>{i18n.$intl('page.dataStatistic.Sales').d('销售总额')}</span>
        <Tooltip message={i18n.$intl('page.dataStatistic.more').d('更多')}>
          <Icon icon="pi-apps"/>
        </Tooltip>
      </div>
      <div className="pro-data-statistic-summary-card-result">
        ￥<RollingNumber val={98165.10}/>
      </div>
      <div className="pro-data-statistic-sales-info">
        <div>
          <span>{i18n.$intl('page.dataStatistic.Weekly').d('周同比')}</span>
          <span>12%</span>
          <Icon icon="pi-caret-up" status={'success'}/>
        </div>
        <div>
          <span>{i18n.$intl('page.dataStatistic.Daily').d('日同比')}</span>
          <span>5%</span>
          <Icon icon="pi-caret-down" status={'error'}/>
        </div>
      </div>
      <div className="pro-data-statistic-summary">
        <span>{i18n.$intl('page.dataStatistic.DailySales').d('日销售额：')}</span>
        <span>￥ <RollingNumber val={5129.88}/></span>
      </div>
    </div>
  );
});
